<template>
	<view id="notification">
		<view 
		class="item uni-padding-wrap" 
		v-for="item in list" 
		:key="item.id" 
		:data-type="item.type" 
		:data-action_key="item.data.action_key" 
		:data-action_id="item.data.action_id" 
		:data-target_id="item.data.target_id" 
		:data-root_comment_id="item.data.root_comment_id" 
		:data-id="item.id" 
		:data-read_at="item.read_at" 
		@click="gotoTarget" 
		>
			<view class="header">
				<image :src="item.data.user_avatar" class="avatar" mode="aspectFill" />
				<view class="user-action-wrap">
					<view class="user-action">
						<view class="username">{{ item.data.user_name}}</view>
						<view class="action">{{ item.action}}</view>
					</view>
					<view class="text-muted">{{ item.created_at }}</view>
				</view>
				<view class="badge" v-if="!item.read_at"></view>
			</view>
			<view v-if="item.data.action_title" class="action-title">{{ item.data.action_title }}</view>
			<view class="target word-break">
				<text class="target-username">@我：</text>
				{{item.data.target_title}}
			</view>
			<view class="actions">
				<view class="delete-box" @tap.stop="doDelete" :data-id="item.id">
					<icon class="iconfont icon-trash" />
					<text>删除</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ListOptions from '../../minxins/list-options.js'
	export default {
		data() {
			return {
				page: 'notification'
			}
		},
		mixins: [ListOptions],
		components: {
			
		},
		async onLoad(options) {
			this.options = Object.assign({}, this.options, options)
			try {
				let result = await this.fetchPageData()
				this.renderPage(result)
			} catch (error) {
				
			}
		},
		methods: {
			async fetchPageData() {
				let result = await this.$api.listNotification(this.options);
				return result;
			},
			doDelete(e) {
				let dataset = e.currentTarget.dataset
				let self = this
				console.log(dataset)
				uni.showModal({
				    title: '提示',
				    content: '确定要删除此条通知？',
				    success: async function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
										let res = await self.$api.deleteNotification({"__resource_id": dataset.id})
										await self.freshPage()
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			gotoTarget(e) {
				let dataset = e.currentTarget.dataset
				console.log(dataset)
				if (dataset.type == 'App\\Notifications\\TopicReplied') {
					//帖子被回复，直接跳转回复详情查看回复内容
					uni.navigateTo({
					   url: "/pages/comment-detail/comment-detail?root_id=" + dataset.action_id + "&include_root_comment=1&notification_id=" + dataset.id + "&read_at=" + dataset.read_at
					})
				} else if (dataset.type == 'App\\Notifications\\CommentReplied') {
					//留言被回复，同样跳转回复详情查看，如果留言内容有根评论，把留言内容放其第一位
					uni.navigateTo({
					   url: "/pages/comment-detail/comment-detail?root_id=" + dataset.root_comment_id + "&include_root_comment=1&append_key=" + dataset.action_key + "&notification_id=" + dataset.id + "&read_at=" + dataset.read_at
					})
				} else if (dataset.type == 'App\\Notifications\\TopicLiked' && dataset.target_id) {
					//帖子被点赞，直接查看帖子
					uni.navigateTo({
					   url: "/pages/topic-comment/topic-comment?tid=" + dataset.target_id + "&notification_id=" + dataset.id + "&read_at=" + dataset.read_at
					})
				} else if (dataset.type == 'App\\Notifications\\CommentLiked') {
					//回复被点赞，查看回复详情，如果回复有根评论，把回复放其第一位
					uni.navigateTo({
					   url: "/pages/comment-detail/comment-detail?root_id=" + dataset.root_comment_id + "&include_root_comment=1&append_key=" + dataset.target_key + "&notification_id=" + dataset.id + "&read_at=" + dataset.read_at
					})
				} else if (dataset.type == 'App\\Notifications\\TopicDeleted') {
					//帖子被删除，不跳转
					
				} else if (dataset.type == 'App\\Notifications\\TopicRestored') {
					//帖子被恢复
					uni.navigateTo({
					   url: "/pages/topic-comment/topic-comment?tid=" + dataset.target_id + "&notification_id=" + dataset.id + "&read_at=" + dataset.read_at
					})
				}
			}
		}
		
	}
</script>

<style lang="scss">
#notification {
	.item {
		display: flex;
		flex-direction: column;
		padding-top: 20upx;
		padding-bottom: 20upx;
		&:not(:last-child) {
			// border-bottom: 10upx solid #eee;
			margin-bottom: 20upx;
		}
		.header {
			display: flex;
			align-items: center;
			.user-action-wrap {
				display: flex;
				flex-direction: column;
				padding-left: 20upx;
				flex-grow: 1;
				.user-action {
					display: flex;
					.username {
						font-weight: bold;
					}
					.action {
						margin-left: 20upx;
					}
				}
			}
			.badge {
				width: 16upx;
				height: 16upx;
				background-color: orangered;
				border-radius: 50%
			}
		}
		.action-title {
			margin-top: 10upx;
		}
		.target {
			background-color: #eee;
			padding: 20upx;
			margin-top: 20upx;
			font-size: 80%;
			.target-username {
			}
		}
		.actions {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			.iconfont {
				margin-right: 10upx;
			}
		}
	}
	
}
</style>
